<template>
    <div class="com_box flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <AdverDetails ref="dt_ref" />
        <TimeRank />
        <div class="time_head flexbox flexcenter flexbetween">
            <div class="flexbox flexcenter">
                <el-popover placement="bottom-start" width="380" v-model="is_model">
                    <div slot="reference" class="select_box flexbox flexcenter flexbetween">
                        <div class="flexbox flexcenter">
                            <img src="@/assets/img/model_icon.svg" alt="" class="select_icon">
                            <span class="select_text">{{ modelCheck.name }}</span>
                        </div>
                        <span class="el-icon-caret-bottom"></span>
                    </div>
                    <div class="time_model">
                        <span class="tm_title font_16 color_01">模板</span>
                        <div class="yusuan_list">
                            <div class="yusuan_item flexbox flexcenter flexbetween" @click="changeModel(item, index)" :class="{'active':item.id==queryInfo.template_id}" v-for="(item, index) in modelList" :key="index">
                                <img src="@/assets/img/market_checked.svg" alt="" class="ys_check">
                                <div class="font_14 color_01">{{ item.name }}</div>
                            </div>
                        </div>
                    </div>
                </el-popover>

                <el-select v-model="queryInfo.template_advertiser_id" @change="changeUser" placeholder="账户" style="margin-left:10px;width:285px" class="user_select">
                    <div slot="prefix" class="select_pre flexbox flexcenter">
                        <img src="@/assets/img/account_icon.svg" alt="">
                    </div>
                    <el-option label="全部" value="0" v-if="modelCheck.advertiser"></el-option>
                    <el-option :label="item.advertiser_name" :value="item.template_advertiser_id" v-for="(item, index) in modelCheck.advertiser" :key="index"></el-option>
                </el-select>
            </div>
            <el-button plain size="small" class="plain_blue" @click="toAdvertGroup">
                <div class="flexbox flexcenter flexjust">
                    <svg width="16" height="16" class="btn_svg" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="#4475FF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="#4475FF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M8 2V11" stroke="#4475FF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M8 2V11" stroke="#4475FF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M4 6L8 2L12 6" stroke="#4475FF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M4 6L8 2L12 6" stroke="#4475FF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    广告组
                </div>
            </el-button>
        </div>
        <div class="pd_20">
            <div class="flexbox flexcenter time_rank flexbetween">
                <div class="has_check flexbox flexcenter flexbetween" v-if="users.length > 0">
                    <div class="has_ch_left">
                        <span class="has_text">已选中{{ users.length }}项</span>
                        <span class="has_btn" @click="batchEnablePlan('ENABLE')">开启</span>
                        <span class="has_btn" @click="batchDisablePlan('DISABLE')">关停</span>
                    </div>
                    <div class="close_check" @click="closeCheck">
                        <img src="@/assets/img/close_check.svg" alt="">
                    </div>
                </div>
                <template v-else>
                    <div class="flexbox flexcenter">
                        <span class="font_14 color_01" style="margin-right:10px">时间粒度：</span>
                        <el-radio-group v-model="queryInfo.during" size="small" @change="getDataList(1)">
                            <el-radio-button label="5">5分钟</el-radio-button>
                            <el-radio-button label="10">10分钟</el-radio-button>
                            <el-radio-button label="30">30分钟</el-radio-button>
                            <el-radio-button label="60">60分钟</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="flexbox flexcenter">
                        <el-input placeholder="输入计划ID" size="small" style="width:216px;margin-right:16px" clearable @change="getDataList(1)" prefix-icon="el-icon-search" v-model="queryInfo.query">
                        </el-input>
                        <el-button plain size="small" @click="timeRank()" :class="{ 'has_rank': rankShow() == true }">
                            <div class="flexbox flexcenter flexjust">
                                <svg width="16" height="16" viewBox="0 0 16 16" stroke="#616C85" fill="none" xmlns="http://www.w3.org/2000/svg" class="stroke_svg btn_svg">
                                    <path d="M3.02806 3C2.61096 3 2.37722 3.48061 2.63474 3.80871L6.69332 8.97963C6.76243 9.06769 6.8 9.1764 6.8 9.28834V13.4085C6.8 13.5924 6.90096 13.7615 7.06286 13.8487L8.46286 14.6029C8.79598 14.7823 9.2 14.5411 9.2 14.1627V9.28834C9.2 9.1764 9.23757 9.06769 9.30668 8.97963L13.3653 3.80871C13.6228 3.48061 13.389 3 12.9719 3H3.02806Z" stroke="inherit" stroke-width="1.2" stroke-linejoin="round" />
                                </svg>
                                计划筛选
                            </div>
                        </el-button>
                        <el-button size="small" @click="resetForm()" class="el-button-width" v-if="rankShow()">重 置
                        </el-button>
                    </div>
                </template>
            </div>
        </div>
        <div class="flex over_box table_box">
            <el-table :data="tableData" @sort-change='sortChange' ref="multipleTable" class="com_table" height="100%" :row-key="(row) => { return row.id }" @selection-change="handleSelectionChange">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="@/assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column type="selection" width="55" align="center" :reserve-selection="true" :selectable='selectEnable'>
                </el-table-column>
                <el-table-column prop="segmentation_during" label="时段" min-width="120" sortable="custom">
                </el-table-column>
                <el-table-column prop="advertiser_name" label="广告账户" min-width="200" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="ad_name" label="广告计划" min-width="200" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <template v-if="scope.row.lab_ad_type == 'LAB_AD'">
                            <!-- <el-link type="primary" :underline="false">{{scope.row.ad_name}}</el-link> -->
                            <div class="ad_name">{{scope.row.ad_name}}</div>
                            <!-- <div class="ad_tips">(托管计划不可关闭)</div> -->
                        </template>
                        <template v-else>
                            {{scope.row.ad_name}}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="ad_id" label="计划ID" min-width="180" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="stat_cost" label="当前消耗" min-width="120" sortable="custom">
                </el-table-column>
                <el-table-column prop="pay_order_amount" label="当前转化销售额" min-width="170" sortable="custom">
                </el-table-column>
                <el-table-column prop="pay_order_roi" label="当前ROI" min-width="120" sortable="custom">
                </el-table-column>
                <el-table-column prop="segmentation_cost" label="时段消耗" min-width="120" sortable="custom">
                </el-table-column>
                <el-table-column prop="segmentation_gmv" label="时段转化销售额" min-width="180" sortable="custom">
                </el-table-column>
                <el-table-column prop="segmentation_roi" label="时段ROI" min-width="120" sortable="custom">
                </el-table-column>
                <el-table-column prop="full_name" label="计划开关" width="100" fixed="right" align="center">
                    <template slot-scope="scope">
                        <el-switch :value="scope.row.operation_status" active-value="ENABLE" inactive-value="DISABLE" @change="switchPlan(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="full_name" label="操作" width="99" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" :underline="false" @click="toPlanDetails(scope.row)">详情</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page_box flexbox flexcenter">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
import AdverDetails from "./model/AdverDetails";
import TimeRank from "./model/TimeRank";
export default {
    name: "",
    data() {
        return {
            loading: false,
            is_model: false,
            modelCheck: {},
            modelList: [],
            users: [],
            activeModel: null,
            queryInfo: {
                template_advertiser_id: "",
                template_id: "",
                during: "5",
                page: 1,
                limit: 20,
                order_field: "",
                order_type: "",
                query:"",
                stat_cost: [],
                pay_order_roi: [],
                segmentation_cost: [],
                segmentation_roi: [],
            },
            total: 0,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        let moedel_data = JSON.parse(this.$route.query.moedel_data);
        this.modelCheck = moedel_data.modelCheck;
        this.activeModel = moedel_data.activeModel;
        this.queryInfo.template_advertiser_id =
            moedel_data.template_advertiser_id;
        this.queryInfo.template_id = moedel_data.template_id;
        this.getModelList();
        this.getDataList(1);
    },
    methods: {
        // 禁止选择
        // selectEnable(row, rowIndex) {
        //     if (row.lab_ad_type == "LAB_AD") {
        //         return false;
        //     } else {
        //         return true;
        //     }
        // },

        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/tiktokboard/adCount",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        //获取模板列表
        async getModelList() {
            const { data: res } = await this.$http.post(
                "adminapi/tiktokboard/templateList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.modelList = res.data;
            }
        },

        // 切换模板
        changeModel(item, index) {
            this.is_model = false;
            this.activeModel = index;
            this.modelCheck = item;
            this.queryInfo.template_advertiser_id = "0";
            this.queryInfo.template_id = item.id;
            this.getDataList(1);
        },

        // 账户切换
        changeUser() {
            this.getDataList(1);
        },

        // 添加模板
        addTimeModel() {
            const attr = {
                dialogVsb: true,
            };
            this.$bus.emit("addTimeModel", attr);
        },

        // 批量选择
        handleSelectionChange(val) {
            var ids = [];
            val.forEach((element) => {
                ids.push({
                    ad_id: element.ad_id,
                    advertiser_id: element.advertiser_id,
                });
            });
            this.users = ids;
        },

        switchPlan(row) {
            let text = row.operation_status == "ENABLE" ? "关闭" : "开启";
            this.$confirm(`请问是否${text}已选中计划`, `${text}计划`, {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    this.loading = true;
                    let ads = [
                        {
                            ad_id: row.ad_id,
                            advertiser_id: row.advertiser_id,
                        },
                    ];
                    let type =
                        row.operation_status == "ENABLE" ? "DISABLE" : "ENABLE";
                    const { data: res } = await this.$http.post(
                        this.$tiktokUrl+"adminapi/tiktokboard/adStatusUpdate",
                        {
                            ads: ads,
                            operation_status: type,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.loading = false;
                        return;
                    } else {
                        this.loading = false;
                        this.$message({
                            type: "success",
                            message: "操作成功",
                        });
                        this.getDataList(this.queryInfo.page);
                    }
                })
                .catch(() => {});
        },

        // 批量开启
        batchEnablePlan(type) {
            this.$confirm("请问是否开启已选中计划", "开启计划", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    this.loading = true;
                    const { data: res } = await this.$http.post(
                        this.$tiktokUrl+"adminapi/tiktokboard/adStatusUpdate",
                        {
                            ads: this.users,
                            operation_status: type,
                        }
                    );
                    if (res.code !== 200) {
                        this.loading = false;
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.loading = false;
                        this.$message({
                            type: "success",
                            message: "开启成功",
                        });
                        this.$refs.multipleTable.clearSelection();
                        this.getDataList(this.queryInfo.page);
                    }
                })
                .catch(() => {});
        },

        // 批量关停
        batchDisablePlan(type) {
            this.$confirm("请问是否关闭已选中计划", "关闭计划", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    this.loading = true;
                    const { data: res } = await this.$http.post(
                        this.$tiktokUrl+"adminapi/tiktokboard/adStatusUpdate",
                        {
                            ads: this.users,
                            operation_status: type,
                        }
                    );
                    if (res.code !== 200) {
                        this.loading = false;
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.loading = false;
                        this.$message({
                            type: "success",
                            message: "关闭成功",
                        });
                        this.$refs.multipleTable.clearSelection();
                        this.getDataList(this.queryInfo.page);
                    }
                })
                .catch(() => {});
        },

        // 关闭批量选择
        closeCheck() {
            this.users = [];
            this.$refs.multipleTable.clearSelection();
        },

        // 跳转广告组
        toAdvertGroup() {
            let data = {
                modelCheck: this.modelCheck,
                activeModel: this.activeModel,
                template_advertiser_id: this.queryInfo.template_advertiser_id,
                template_id: this.queryInfo.template_id,
            };
            let moedel_data = JSON.stringify(data);
            this.$router.push({
                path: "/tk_advert_group",
                query: {
                    moedel_data: moedel_data,
                },
            });
        },

        // 跳转广告计划详情
        toPlanDetails(item) {
            const attr = {
                advertiser_id: item.advertiser_id,
                template_id: this.queryInfo.template_id,
                ad_id: item.ad_id,
                name: item.ad_name,
            };
            this.$refs.dt_ref.getData(attr)
            // this.$router.push({
            //     path: "/plandetails",
            //     query: {
            //         advertiser_id: item.advertiser_id,
            //         template_id: this.queryInfo.template_id,
            //         ad_id: item.ad_id,
            //         name: item.ad_name,
            //     },
            // });
        },

        resetForm() {
            this.queryInfo.stat_cost = [];
            this.queryInfo.pay_order_roi = [];
            this.queryInfo.segmentation_cost = [];
            this.queryInfo.segmentation_roi = [];
            this.getDataList(1);
        },

        // 排序
        sortChange(column) {
            this.queryInfo.order_type = "";
            this.queryInfo.order_field = "";
            if (!column.order) {
                this.getDataList(this.queryInfo.page);
                return;
            } else {
                var order = column.order.slice(0, -6);
            }
            this.queryInfo.order_type = order;
            this.queryInfo.order_field = column.prop;
            this.getDataList(1);
        },

        // 计划筛选
        timeRank() {
            const attr = {
                dialogVsb: true,
            };
            this.$bus.emit("timeRank", attr);
        },

        rankShow() {
            let isShow =
                this.queryInfo.stat_cost.length > 0 ||
                this.queryInfo.pay_order_roi.length > 0 ||
                this.queryInfo.segmentation_cost.length > 0 ||
                this.queryInfo.segmentation_roi.length > 0
            return isShow;
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.queryInfo.page = val;
            this.getDataList(val);
        },
    },
    components: {
        AdverDetails,
        TimeRank,
    },
};
</script>


<style scoped>
.time_head {
    height: 80px;
    border-bottom: 1px solid #ebebeb;
    padding: 0 20px;
}

.select_icon {
    margin-right: 10px;
}

.select_box {
    width: 260px;
}

.select_pre {
    height: 100%;
}

.time_title {
    font-size: 16px;
    color: #17233d;
    line-height: 22px;
    padding-left: 10px;
    position: relative;
    font-weight: bold;
}

.time_title::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 12px;
    background-color: #4475ff;
    border-radius: 5px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.pd_20 {
    padding: 0 20px;
}

.tc_text {
    font-size: 14px;
    color: #616c85;
    margin-top: 8px;
    line-height: 20px;
    height: 20px;
}

.time_rank {
    height: 70px;
}

.table_box {
    padding: 0 20px;
}

.time_model {
    padding: 8px;
}

.yusuan_list {
    margin-top: 0;
    margin-bottom: 20px;
}

.time_tag {
    padding: 0 8px;
    line-height: 21px;
    height: 21px;
    font-size: 12px;
    color: #616c85;
    border-radius: 2px;
    margin-right: 10px;
    background-color: rgba(165, 177, 209, 0.08);
}
.ad_tips {
    font-size: 12px;
    color: #ff3c31;
}
.ad_name {
    color: #4475ff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>

<style>

.el-button.has_rank {
    background: #fff !important;
    border-color: #3d69e6 !important;
    color: #3d69e6 !important;
    outline: 0 !important;
}

.el-button.has_rank svg {
    stroke: #3d69e6 !important;
}
</style>

